<template>
  <div class="shopClassify">
    <!-- 添加 -->
    <el-button @click="showAddClassify" class="btnAdd" type="success" plain>添加分类</el-button>
    <!-- 表格 -->
    <el-table
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    v-loading="loading"
    row-key="cat_id"
    :data='CalssifyList'>
       <el-table-column  prop="cat_name" label="分类名称"></el-table-column>

       <el-table-column label="是否有效">
           <template v-slot:default="{row}">
              <p>{{row.cat_deleted? '否': '是'}}</p>
           </template>
       </el-table-column>
       <el-table-column prop="cat_level" label="排序"></el-table-column>
       <el-table-column prop="" label="操作">
          <template v-slot:default='{row}'>
                <el-button size="small" plain type="primary" icon="el-icon-edit"></el-button>
                <el-button size="small" plain type="danger" icon="el-icon-delete"></el-button>
           </template>
       </el-table-column>
    </el-table>

    <!--分页 -->
     <el-pagination
      @current-change='currentClassify'
      @size-change='sizeClassify'
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total= 'total'>
    </el-pagination>

    <!-- 添加分类对话框 -->
    <el-dialog @close='classifyDialog' title="添加分类" width="40%" :visible.sync="showClassify">
      <el-form :rules="rules" ref="ClassifyForm" :model="ClassifyForm">
        <el-form-item prop="cat_name" label="分类名称" :label-width="formLabelWidth">
          <el-input placeholder="请输入分类名称" v-model="ClassifyForm.cat_name" ></el-input>
        </el-form-item>
        <el-form-item label="父级名称" prop="cat_pid" :label-width="formLabelWidth">
           <el-cascader
              v-model="ClassifyForm.cat_pid"
              :options="options"
              :props="props"
              clearable
             >
           </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showClassify = false">取 消</el-button>
        <el-button @click="addClassify" type="primary" >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      CalssifyList: [],
      pagenum: 1,
      pagesize: 5,
      total: 0,
      // 加载
      loading: false,
      // 添加
      showClassify: false,
      ClassifyForm: {
        cat_pid: [],
        cat_name: '',
        cat_level: ''
      },
      formLabelWidth: '120px',
      value: [],
      options: [],
      props: {
        label: 'cat_name',
        value: 'cat_id',
        checkStrictly: true
      },
      // 表单验证
      rules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  created () {
    this.getCalssifyList()
  },
  methods: {
    async getCalssifyList () {
      // 数据请求前显示加载
      this.loading = true
      const { data, meta } = await this.$axios.get('categories', {
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize,
          type: 3
        }
      })
      // console.log(data)
      if (meta.status === 200) {
        this.CalssifyList = data.result
        this.total = data.total
        // 请求数据完成停止加载
        this.loading = false
      } else {
        console.log(meta.msg)
      }
    },
    currentClassify (value) {
      this.pagenum = value
      this.getCalssifyList()
    },
    sizeClassify (value) {
      this.pagesize = value
      this.getCalssifyList()
    },
    // 显示添加分类对话框
    async showAddClassify () {
      this.showClassify = true
      const { data, meta } = await this.$axios.get('categories?type=2')
      if (meta.status === 200) {
        this.options = data
      }
    },
    // 添加分类
    async addClassify () {
      try {
        await this.$refs.ClassifyForm.validate()
        const catName = this.ClassifyForm.cat_name
        const catPid = this.ClassifyForm.cat_pid
        const { meta } = await this.$axios.post('categories', {
          cat_name: catName,
          cat_level: catPid.length,
          cat_pid: catPid[catPid.length - 1] || 0
        })
        if (meta.status === 201) {
          this.$message({
            message: meta.msg,
            type: 'success',
            duration: 1000
          })
          this.showClassify = false
          this.getCalssifyList()
        } else {
          this.$message({
            message: meta.msg,
            type: 'error',
            duration: 1000
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 对话框关闭时重置数据
    classifyDialog () {
      this.$refs.ClassifyForm.resetFields()
      // console.log(this.$refs)
    }
  }
}
</script>

<style lang='scss' scoped>
   .shopClassify{
     .btnAdd{
       margin-bottom: 15px;
     }
     .el-pagination{
      margin-top: 10px;
    }
   }
</style>
